import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Layout from '@/Layout/index.vue'
import { useUserStore } from '../stores' // export *
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 虚拟进度条
NProgress.configure({ showSpinner: false, ease: 'ease', speed: 500 })

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(),
  routes: [
    // 路由懒加载，  url 不分大小写
    {
      path: '/login',
      component: () => import('@/views/Login/index.vue'),
      meta: {
        title: '登录'
      }
    },
    {
      path: '/user/patient',
      component: () => import('@/views/User/PatientPage.vue'),
      meta: {
        title: '家庭档案'
      }
    },
    {
      path: '/room',
      component: () => import('@/views/Room/index.vue'),
      meta: {
        title: '医生问诊室'
      }
    },
    {
      path: '/my',
      component: Layout,
      redirect: '/home',
      children: [
        // 下面子路由加不加 / 影响很大
        {
          path: '/home',
          component: () => import('@/views/Home/index.vue'),
          meta: {
            title: '首页'
          }
        },
        {
          path: 'article',
          component: () => import('@/views/Article/index.vue'),
          children: [
            {
              // 这里就是三级路由的写法 -- 到这里来的 页面绝对会经过 三个 router-view， 不知道怎么写，去github看别人的代码
              // 直接看 router相关的， 每个path加不加/ 对于路径的拼接有很大的影响
              // path: '',
              path: 'child',
              component: () => import('@/views/Article/Article-child.vue'),
              meta: {
                title: '文章'
              }
            }
          ]
        },
        {
          path: 'notify',
          component: () => import('@/views/Notify/index.vue'),
          meta: {
            title: '通知'
          }
        },
        {
          path: '/user',
          component: () => import('@/views/User/index.vue'),
          meta: {
            title: '我的'
          }
        }
      ]
    }
  ]
})

//白名单， 不需要权限，不需要登录就可以看见的页面
const whiteList: any = ['/login']

// 两个路由守卫 -- 前置  后置
router.beforeEach((to, from, next) => {
  NProgress.start()
  // 现在除了登录页面 不需要权限，可以直接访问，其他任何页面都需要 登录以后(有没有token)才能访问
  const useUser = useUserStore()
  if (useUser.user?.token) return next()

  // 下面是没有token 的情况下，关于是否在白名单的操作
  // if (to.path === '/login' || to.path === '/registery' || to.path === 'xxxxxx') {
  if (whiteList.includes(to.path)) {
    return next()
  }

  next('/login') // 放行
  // return '/login'
})

router.afterEach((to) => {
  console.log(to)

  // 我去到什么页面，就显示什么标题
  document.title = `${to.meta?.title as any} | 优医问诊H5`
  NProgress.done()

  // to.matched 就是当前 页面有几个 router-view， 有几个子路由
  // 对一些需要获取 有几个子路由的情况 children，这个to.mathed就比较合适
  // to.matched.forEach((item) => {
  //   if (item.path.includes(to.path)) {
  //     // item.children
  //   }
  // })
})

export default router
